<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>	
	<view>
		<view class="bigBG" :style="{ position: 'fixed', width: windowWidth + 'px', height: windowHeight + 'px' }"></view>
		<view>
			<uni-card title="提交结果" style="font-size: $uni-font-size-custom-e; border-radius: 12px; top: 10px; color: #040606" thumbnail="../../../image/meinv.png">
				<view class="naironBox">
					<radio-group @change="radioChange">
						<view class="radioListBox" v-for="(item, index) in radioList" :key="item.value">
							<text style="font-size: $uni-font-size-custom-d;">{{ item.title }}</text>
							<radio style="transform: scale(.8,.8); margin-right: 10px;" :value="item.value" :checked="index === current" />
						</view>
					</radio-group>
				</view>
			</uni-card>
			<uni-card style="font-size: $uni-font-size-custom-e; border-radius: 12px; top: 10px;">
				<view class="miaoshuBox">
					<textarea
						class="bohuiTextareaBox2"
						:value="textareaValue"
						@input="textareaInputs"
						:maxlength="80"
						placeholder-style="color:#9B9B9B"
						placeholder="描述（必填）"
					/>
				</view>
			</uni-card>
			<uni-card style="background-color: rgba(0,0,0,0); top: 10px;">
				<view class="luxianpaizaoBottom">
					<view class="upImgBig">
						<view class="csImgBg" v-for="(item, index) in img" :key="index">
							<image class="csImg" :src="item" alt="测试" @tap="yulan(item)"></image>
							<uni-icons class="scBtn" color="#ffffff" type="closeempty" size="18" @tap="deleImg(item)"></uni-icons>
						</view>
						<view class="videoBox" v-if="spSrc !== null ? true : false">
							<video
								id="myVideo"
								:src="spSrc"
								@error="videoError"
								:controls="konjianShow"
								@fullscreenchange="fullscreenchangeControls"
								class="videoItems"
								:enable-play-gesture="true"
								objectFit="contain"
							>
								<cover-view class="videoBofan" @tap="playView"></cover-view>
								<cover-view class="videoBofanNum">{{ durationNum }}</cover-view>
								<cover-view class="scBtn2" @tap="deleVideo">X</cover-view>
							</video>
						</view>
						<view class="tianjiaimg" @tap="addimgs" v-if="img.length >= 3 ? false : true">
							<uni-icons class="addBtn" color="#666666" type="camera" size="30"></uni-icons>
							<text class="addTitletp">上传图片</text>
						</view>
					</view>
					<view class="luxianBox" :style="img.length >= 3 ? 'margin-top: 5px;' : ''" v-if="spSrc !== null ? false : true">
						<view class="tianjialx" @tap="paizhao">
							<uni-icons class="addlxBtn" color="#666666" type="videocam" size="50"></uni-icons>
							<text class="addlxTitletp">上传视频</text>
						</view>
					</view>
				</view>
			</uni-card>
			<view class="lrbottomBox2"></view>
		</view>
		<view class="lrbottomBox"><button type="primary" @tap="SubmitListBox">确认</button></view>
	</view>
</template>

<script>
import { picturUp } from '@/utils/pictureUp.js';
import { getStorage } from '@/utils/setStorage.js';
import baseFont from '@/utils/baseFont.js';
export default {
	extends: baseFont,
	data() {
		return {
			windowWidth: 0, // 手机宽
			windowHeight: 0, // 手机高
			current: 0,
			typeNum: 1, // tab状态
			textareaValue: '',
			img: [], // 图片
			imgNum: 3,
			spSrc: null,
			videoContext: null, // 视频播放控件
			durationNum: '00:00',
			konjianShow: false,
			SubmitList: {
				gdbh: '', // 工单编号
				czbt: 1,
				cznr: ''
			},
			radioList: [
				{
					title: '已解决，申请审核',
					value: 1,
					checked: 'true'
				},
				{
					title: '申请其他工程师处理',
					value: 2
				},
				{
					title: '申请外派',
					value: 3
				},
				{
					title: '申请挂起',
					value: 4
				}
			]
		};
	},
	onLoad(option) {
		this.SubmitList.gdbh = option.Gdbh;
		this.typeNum = option.type;
	},
	onReady: function(res) {
		this.$nextTick(() => {
			this.videoContext = uni.createVideoContext('myVideo');
		});
	},
	created() {
		const that = this;
		uni.getSystemInfo({
			success(res) {
				that.windowWidth = res.windowWidth;
				that.windowHeight = res.windowHeight;
			}
		});
	},
	methods: {
		radioChange(e) {
			this.SubmitList.czbt = e.detail.value;
		},
		textareaInputs(e) {
			this.SubmitList.cznr = e.detail.value;
		},
		async SubmitListBox() {
			const user = JSON.parse(getStorage('userconter'));
			const { gdbh, czbt, cznr } = this.SubmitList;
			const arr = [];
			this.img.forEach(item => {
				const obj = {
					url: item
				};
				arr.push(obj);
			});
			if (this.spSrc) {
				const obj2 = {
					url: this.spSrc
				};
				arr.push(obj2);
			}
			var trimCznr = cznr.replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g, '');
			if (trimCznr) {
				const params = {
					GDBH: gdbh,
					CZR_ID: user.id,
					CZNR: trimCznr,
					CZBT: czbt,
					imgs: arr.length > 0 ? JSON.stringify(arr) : ''
				};
				const { data: res } = await this.$http(true, 'ywzx/gdjs/ChuLi', params, 'post');
				if (res.code !== '0000') {
					return uni.showToast({
						title: res.message,
						icon: 'none',
						position: 'top'
					});
				} else {
					uni.reLaunch({
						url: '/pages/index/index?num=' + this.typeNum
					});
					// const pages = getCurrentPages();
					// if (pages.length > 1) {
					// 	uni.navigateBack({
					// 		delta: 1
					// 	});
					// }
				}
			} else {
				this.SubmitList.cznr = ''; // 制空
				uni.showToast({
					title: '描述必须填写！',
					icon: 'none',
					position: 'top'
				});
			}
		},
		// 预览图片
		yulan(url) {
			if (url) {
				uni.previewImage({
					current: url,
					urls: this.img,
					success: res => {
						console.log(res);
					},
					fail: err => {
						console.log(err);
					}
				});
				// void plus.nativeUI.previewImage([url]); // 预览
			} else {
				return;
			}
		},
		// 添加图片
		addimgs() {
			const taht = this;
			if (this.img.length >= 3) {
				return uni.showToast({
					title: '已达最大上传数量！',
					icon: 'none',
					position: 'top'
				});
			} else {
				uni.chooseImage({
					count: taht.imgNum, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: function(res) {
						const urlArr = res.tempFilePaths;
						let imgUrl = '';
						urlArr.forEach(async item => {
							imgUrl = await picturUp(item, 3);
							taht.img.push(imgUrl);
							taht.imgNums();
						});
					}
				});
			}
		},
		// 移除图片
		deleImg(url) {
			const index = this.img.findIndex(item => item === url);
			this.img.splice(index, 1);
			this.imgNums();
		},
		// 移除录像
		deleVideo() {
			this.spSrc = null;
		},
		imgNums() {
			switch (this.img.length) {
				case 1:
					this.imgNum = 2;
					break;
				case 2:
					this.imgNum = 1;
					break;
				default:
					this.imgNum = 3;
					break;
			}
		},
		paizhao() {
			const that = this;
			uni.chooseVideo({
				count: 1,
				maxDuration: 29,
				sourceType: ['camera', 'album'],
				success: function(res) {
					// let videoSize = res.size / (1024 * 1024); // 转成M格式
					// videoSize = videoSize.toFixed(1); // 保留小数点后一位
					let videoMiao = res.duration - '';
					videoMiao = videoMiao.toFixed(0);
					if (videoMiao > 30) {
						return uni.showToast({
							title: '视频上传不得超过30秒!',
							icon: 'none',
							position: 'top'
						});
					} else {
						that.upVideo(res.tempFilePath);
						that.durationNum = res.duration;
						that.videoContext.play();
						setTimeout(() => {
							that.videoContext.pause();
						}, 500);
					}
				}
			});
		},
		async upVideo(url) {
			// this.spSrc = url;
			const imgUrl = await picturUp(url, 3);
			this.spSrc = imgUrl;
		},
		fullscreenchangeControls(e) {
			this.konjianShow = e.detail.fullScreen;
			if (!e.detail.fullScreen) {
				this.videoContext.stop();
			}
		},
		playView(e) {
			this.videoContext.requestFullScreen();
			this.videoContext.play();
		},
		videoError(e) {
			uni.showModal({
				content: '网络错误，请稍后重试！',
				showCancel: false
			});
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .uni-card__header-extra-img {
	vertical-align: middle;
	margin-left: 5px;
	width: 25px;
	height: 25px;
}
::v-deep .uni-border {
	border: none;
}
::v-deep .uni-border:after {
	border: none;
}
::v-deep .uni-list--border {
	border: none;
}
::v-deep .uni-card__content--pd {
	padding: 0px;
}
.bigBG {
	background-color: #f6f6f6;
	z-index: -10;
}
.lrbottomBox2 {
	height: 78px;
}
.lrbottomBox {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 750rpx;
	padding: 15px;
	box-sizing: border-box;
	background-color: #ffffff;
	border-top: 1px solid #f6f6f6;
}
.naironBox {
	margin-left: 50px;
	.radioListBox {
		display: flex;
		justify-content: space-between;
		height: 50px;
		line-height: 50px;
		border-bottom-color: #f0f0f0;
		border-bottom-style: solid;
		border-bottom-width: 0.5px;
	}
	.radioListBox:last-child {
		border-bottom: none;
	}
}
.miaoshuBox {
	.bohuiTextareaBox2 {
		font-size: $uni-font-size-custom-d;
		height: 100px;
		margin: 0 auto;
		padding: 15px;
	}
}
.luxianpaizaoBottom {
	display: flex;
	flex-wrap: wrap;
}
.upImgBig {
	display: flex;
	margin-right: 5px;
	.csImgBg {
		position: relative;
		width: 150rpx;
		height: 150rpx;
		// border: 1px solid #007aff;
		border-radius: 2px;
		margin-right: 10px;
		// overflow: hidden;
		.csImg {
			border-radius: 2px;
			width: 100%;
			height: 100%;
		}
		.scBtn {
			background-color: #f56c6c;
			border-radius: 50%;
			// border-bottom-left-radius: 65%;
			width: 25px;
			height: 25px;
			line-height: 25px;
			position: absolute;
			top: 0px;
			right: 0px;
		}
	}
	.tianjiaimg {
		position: relative;
		width: 150rpx;
		height: 150rpx;
		border-radius: 2px;
		background-color: #ffffff;
		// border: 1px solid #333333;
		.addBtn {
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.addTitletp {
			position: absolute;
			left: 40%;
			bottom: 15%;
			transform: translateX(-35%);
			font-size: $uni-font-size-custom-a;
			color: #666666;
		}
	}
}
.videoBox {
	position: relative;
	width: 150rpx;
	height: 150rpx;
	border-radius: 2px;
	margin-right: 10px;
	overflow: hidden;
	.videoItems {
		border-radius: 2px;
		width: 100%;
		height: 100%;
	}
	.videoBofan {
		opacity: 0.3;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.videoBofanNum {
		font-size: $uni-font-size-custom-a;
		color: #ffffff;
		position: absolute;
		bottom: 10rpx;
		right: 10rpx;
	}
	.scBtn2 {
		background-color: #f56c6c;
		border-radius: 50%;
		width: 25px;
		height: 25px;
		line-height: 20px;
		color: #ffffff;
		text-align: center;
		position: absolute;
		top: 0px;
		right: 0px;
		z-index: 100;
	}
}
.luxianBox {
	display: flex;
	.tianjialx {
		position: relative;
		width: 150rpx;
		height: 150rpx;
		border-radius: 2px;
		background-color: #ffffff;
		// border: 1px solid #333333;
		.addlxBtn {
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.addlxTitletp {
			position: absolute;
			left: 40%;
			bottom: 15%;
			transform: translateX(-35%);
			font-size: $uni-font-size-custom-a;
			color: #666666;
		}
	}
}
</style>
